<template>
    <Row>
        <Col span="17">
        <div class="showBox" style="overflow: scroll">
            <canvas ref="canvasRef" width="2000" height="1000" id="drawing">
                Canvas
            </canvas>
        </div>
        </Col>
        <Col span="7">
        <introduce>字 符 串 匹 配 算 法</introduce>
        <save @get_local_data="get_local_data_func" @get_cloud_data="get_cloud_data_func" @save_data="save_data_func"></save>
        <control @control_speed="speed_func" @control_scale="scale_func" @control_scale_reset="scale_reset"></control>
        <string_match_menu 
            @creat_mubiao_string_emit="creat_mubiao_string"
            @creat_moshi_string_emit="creat_moshi_string" 
            @start_search_emit="start_search" >
        </string_match_menu>
        <chatgpt @call_gpt_emit="show_gpt"></chatgpt>
        <note @call_note_emit="show_note"></note>
        </Col>
    </Row>
    <Drawer title="AI助理" placement="right" :closable="false" v-model="gpt" width="30">
        <chatgpt_main></chatgpt_main>
    </Drawer>
    <Drawer title="学习笔记" placement="bottom" :closable="false" v-model="notes" height="70">
        <note_main></note_main>
    </Drawer>
</template>
  
<script setup>
import control from "@/components/control.vue";
import string_match_menu from "@/components/search/string_match_menu.vue";
import note from "@/components/note.vue";
import chatgpt from "@/components/chatgpt.vue";
import chatgpt_main from "@/components/chatgpt/chatgpt_main.vue";
import note_main from "@/components/markdown_note/note_main.vue";
import introduce from "@/components/introduce.vue";
import Qs from 'qs'

import { ref, onMounted } from "vue";
import {
    speed_func_control,
    scale_func_control,
    scale_reset_control
} from "@/assets/js/play_control.js";
import {
    init,
    creat_mubiao_string_js,
    creat_moshi_string_js,
    start_search_js,
} from "@/assets/js/search/String_match.js";

const canvasRef = ref(null);
var drawing_size = {
    width: 0,
    height: 0,
};
const ctx = ref(null);
// 初始化页面
onMounted(() => {
    drawing_size.width = canvasRef.value.width; drawing_size.height = canvasRef.value.height; init(drawing_size); ctx.value = canvasRef.value.getContext("2d");
});

// 播放速度
function speed_func(play_speed) {
    speed_func_control(play_speed);
}
// 画布缩放
function scale_func(canvas_scale) {
    scale_func_control(canvas_scale, ctx.value, drawing_size);
}
// 恢复
function scale_reset(canvas_scale) {
    scale_reset_control(canvas_scale, ctx.value, drawing_size);
}

// 具体操作
function creat_mubiao_string(mubiao_string) {
    // 因为是const引用,所以只能通过相互赋值进行传递参数
    console.log(mubiao_string)
    localStorage.setItem('mubiao_string', '');  // 因为创建后，此前的action就没有用了，因此清楚local_storage中已存的action
    creat_mubiao_string_js(mubiao_string);
    const new_mubiao = localStorage.getItem('mubiao_string') + `(mubiao,${mubiao_string})`;
    // console.log(typeof init_value.value)
    localStorage.setItem('mubiao_string', new_mubiao);
}
function creat_moshi_string(moshi_string) {
    console.log(moshi_string)
    alert(moshi_string);
    localStorage.setItem('moshi_string', '');
    creat_moshi_string_js(moshi_string);
    const new_moshi = localStorage.getItem('moshi_string') + `(moshi,${moshi_string})`;
    localStorage.setItem('moshi_string', new_moshi);
}
function start_search(a,b) {
    start_search_js(a,b);
}

// function start_search2(){
//     let aa = 0;
//     let bb = 0;
//     if(localStorage.getItem('mubiao_string')){
//         aa = localStorage.getItem('mubiao_string').length
//     }
//     if(localStorage.getItem('moshi_string')){
//         bb = localStorage.getItem('moshi_string').length
//     }
//     console.log(aa)
//     start_search_js(aa,bb);
// }
// 显示gpt
const gpt = ref(false);
function show_gpt() {
    gpt.value = true;
}

// 显示notes
const notes = ref(false);
function show_note() {
    notes.value = true;
}
import {getCurrentInstance} from "vue"
const {proxy} = getCurrentInstance()
import save from "@/components/save.vue";
// 获取本地学习记录
function get_local_data_func() {
    creat_moshi_string_js(localStorage.getItem('moshi_string').split(",")[1].slice(0,-1));
    creat_mubiao_string_js(localStorage.getItem('mubiao_string').split(",")[1].slice(0,-1));
    // start_search2();
}

// 获取云端学习记录
function get_cloud_data_func(){
    proxy.$http.get('/download_action',{params:{
        username:localStorage.getItem('name'),
        type:"stringMatch",
      }
  })
  .then((response)=> {
    if(response.data == ""){
      alert("没有云端数据！")
    } else{
      let action_list = response.data.split(";");
      localStorage.setItem('moshi', action_list[1]);
      localStorage.setItem('mubiao', action_list[0]);
      get_local_data_func();
    }   
    })
  .catch(function (error) {
    console.log(error)
    })
}

// 保存数据到云端
function save_data_func(){
    let action_list = localStorage.getItem('mubiao_string')+";"+localStorage.getItem('moshi_string')
    let params = {
        username:localStorage.getItem('name'),
        type:"stringMatch",
        setUpTime:"0",
        actionList: action_list,
        };
    console.log(localStorage.getItem('moshi'))
    proxy.$http.post('/upload_action',Qs.stringify(params)
    )
    .then((response)=> {
        alert("保存成功！")
    })
    .catch(function (error) {
        console.log(error)
    })
}

</script>
  
<style>
@import url("@/assets/css/index.css");
</style>
  